import React, { Component } from 'react';
import { Table, Row, Col, Input, Button} from 'antd';
import './Users.css'
import { connect } from 'react-redux';
import {getListUser} from '../../action/user';
const Search = Input.Search


const columns = [{
  title: 'Id',
  dataIndex: 'id',
  width: 150,
}, {
  title: '用户名',
  dataIndex: 'username',
  width: 150,
},{
  title: '邮箱',
  dataIndex: 'email',
  width: 150,
},{
  title: '状态',
  dataIndex: 'state',
},{
  title: '注册时间',
  dataIndex: 'create_time',
},{
  title: '最后登陆时间',
  dataIndex: 'last_time',
}];

class Users extends Component {
    state = {
      data: [],
      pagination: {
        'current' : 1
      },
      loading: false,
      filtered: ''
    };
    componentWillMount() {
      this.props.listUser({
        page: this.state.pagination.current,
        filtered: this.state.filtered
      });
      console.log(this.props);
    }
    handleTableChange = (pagination, filters, sorter) => {
      const pager = { ...this.state.pagination };
      pager.current = pagination.current;
      this.setState({
        pagination: {current: pagination.current}
      })
      this.props.listUser({
        page: this.state.pagination.current,
        filtered: this.state.filtered
      });
    }
    onSearch = (value) => {
      this.setState({
        filtered: value
      })
      this.props.listUser({
        page: this.state.pagination.current,
        filtered: value
      });
    }
    render() {
      return (
        <div className="mytable">
          <Row gutter={24}>
          <Col xl={{ span: 6 }} md={{ span: 8 }}>
            <Search placeholder="Search Name" size="large" style={{marginBottom: 16}} 
            onSearch={value => this.onSearch(value)}
            />
          </Col>
          {/* <Col  xl={{ span: 6 }} md={{ span: 8 }}>
                <Button type="primary" size="large" className="margin-right"
                onClick={value => this.onClickSearch()}
                 >Search</Button>
                <Button size="large" style={{marginLeft:16}}>Reset</Button>
          </Col> */}
          </Row>
          <Table columns={columns}
              dataSource={this.props.data}
              pagination={{ total: this.props.total }}
              scroll={{ y: 320 }}
              onChange={this.handleTableChange}
          />
        </div>
      );
    }
}

// map属性
const mapStateToProps = (state) => {
  console.log(state.users)
  return {
    'data': state.users.data,
    'total': state.users.total
  }
}
// map 函数
const mapDispatchToProps = (dispatch) => {
  return {
      listUser: (values) => {
          dispatch(getListUser(values))
      }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Users);
